import React, { Component } from 'react';
import { LoginWrapper, LoginBox, Input, LoginButton } from './style'
import { connect } from 'react-redux'
import { Redirect } from 'react-router'
import {actionCreators} from './store'
class Login extends Component {
    render() {
        const { loginState } = this.props
        if (!loginState) {
            return (
                <LoginWrapper>
                    <LoginBox>
                        <Input placeholder='账号' ref={(input) => { this.account = input }}></Input>
                        <Input placeholder='密码' ref={(input) => { this.password = input }} type="password"></Input>
                        <LoginButton onClick={()=>this.props.clickLogin(this.account, this.password)}>登陆</LoginButton>
                    </LoginBox>
                </LoginWrapper>
            );
        } else {
            return <Redirect to="/"></Redirect>
        }
    }

  
}

const mapState = (state) => ({
    loginState: state.getIn(['login', 'loginState'])
})

const mapDispatch = (dispatch) => {
    return {
        clickLogin(account, password){
            console.log(account.value, password.value)
            dispatch(actionCreators.loginIn(account.value,password.value))
        }
    }
}


export default connect(mapState, mapDispatch)(Login);